<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>星空矿机</title>
    <link rel="stylesheet" type="text/css" href="index.css">
    <script src="../starrysky/js/video-js/js/video.min.js"></script>
    <link rel="stylesheet" href="../starrysky/js/video-js/css/video-js.css">
    <link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="../starrysky/js/vue.min.js"></script>
</head>

<body>
<div class="wrapp" id="wrapp">
    <div class="head">
        <div class="head_1" id="Home" ref="Home">
            <img src="../starrysky/img/星空生态-彩-竖版.png" alt="" class="logoImg">
            <img src="../starrysky/img/Rectangle.png" alt="" class="lineGreen">
            <img src="../starrysky/img/banner.jpg" alt="" class="top_1Img">
            <div class="menu">
                <img :src="menuImgAction" alt="" class="homeImg" @click="mao('Home',0)">
                <div class="menuItem" @click="mao('titleXinkong',5)">星空生态</div>
                <div class="menuItem" @click="mao('kuangji',1)">星空矿机</div>
                <div class="menuItem" @click="mao('power',2)">云算力</div>
                <div class="menuItem" @click="mao('IPFS',3)">IPFS官方</div>
                <div class="menuItem" @click="mao('us',4)">联系我们</div>
            </div>
            <div class="title">
                <span>让每个星空生态参与者 成为IPFS红利获得</span>
                <div class="line_1"></div>
            </div>
        </div>
        <div id="H1" class="head_2" :class="{animated:xiongKongisAction,fadeInUpBig:xiongKongisAction}">
            <img src="../starrysky/img/banner_2.jpg" alt="" class="top_1Img">
            <div class="titleXinkong" id="titleXinkong" ref="titleXinkong">
                <span>星空生态</span>
                <div class="line_2"></div>
            </div>
            <div class="xingkongIntrolduce">
                星空生态成立于2018年5月，核心成员毕业于上海交通大学、同济大学等知名高校，曾任职百度、埃森哲、Google、银联、Intel等500强企业，在大数据、AI算法、服务器研发领域拥有15年以上经验。星空生态发挥核心技术优势，将软件算法和硬件研发相结合，打造一套“高效率、高收益、低门槛、低风险”的Filecoin存储挖矿系统。
            </div>
            <div class="xingkongItemBox">
                <div class="xingkongItem" @mouseenter="enter(index)" @mouseleave="leave(index)"
                     v-for="(item,index) in xingkongBoxList" :key="index">
                    <img :src="item.img" alt="" class="xingkongItemImg">
                    <div class="xingkongInfo">
                        {{item.content}}
                    </div>
                    <div class="xingkongItemFoot">
                        <span class="xingkongItemFootWord">{{item.title}}</span>
                        <div class="lineBlue" v-if="item.isShow"></div>
                    </div>
                </div>
            </div>
            <div class="menu_1">
                <img :src="menuImg" alt="" class="homeImg" @click="mao('Home',0)">
                <div class="menuItem action" @click="mao('titleXinkong',5)">星空生态</div>
                <div class="menuItem" @click="mao('kuangji',1)">星空矿机</div>
                <div class="menuItem" @click="mao('power',2)">云算力</div>
                <div class="menuItem" @click="mao('IPFS',3)">IPFS官方</div>
                <div class="menuItem" @click="mao('us',4)">联系我们</div>
            </div>
        </div>
    </div>
    <div id="H2" class="tuoGuan" :class="{animated:kuangjiisAction,fadeInUpBig:kuangjiisAction}">
        <div class="tuoGuanBanner">
            <img src="../starrysky/img/bg大.png" alt="" class="tuoGuanBannerImg">
            <div class="tuoGuanBannerTitle" id="kuangji" ref="kuangji">
                <span>星空矿机与托管</span>
                <div class="line_1"></div>
            </div>
            <div class="tuoGuanBannerContent">
                <img src="../starrysky/img/title矿机.png" alt="" class="tuoGuanBannerContentImg_1">
                <img src="../starrysky/img/suanfa.png" alt="" class="tuoGuanBannerContentImg_2">
            </div>
            <div style="clear: both"></div>
            <div class="tuoGuanBannerContent_1">
                <img src="../starrysky/img/wuxingji.png" alt="" class="tuoGuanBannerContentImg_3 ">
                <img src="../starrysky/img/title矿场.png" alt="" class="tuoGuanBannerContentImg_4">
            </div>
            <div class="tuoGuanBannerContent">
                <img src="../starrysky/img/title算法.png" alt="" class="tuoGuanBannerContentImg_1">
                <img src="../starrysky/img/kuangji.png" alt="" class="tuoGuanBannerContentImg_2">
            </div>
        </div>
        <div class="menu_1">
            <img :src="menuImg" alt="" class="homeImg" @click="mao('Home',0)">
            <div class="menuItem" @click="mao('titleXinkong',5)">星空生态</div>
            <div class="menuItem action" @click="mao('kuangji',1)">星空矿机</div>
            <div class="menuItem" @click="mao('power',2)">云算力</div>
            <div class="menuItem" @click="mao('IPFS',3)">IPFS官方</div>
            <div class="menuItem" @click="mao('us',4)">联系我们</div>
        </div>
    </div>
    <div id="H3" class="power" :class="{animated:powerisAction,fadeInUpBig:powerisAction}">
        <div class="powerContent">
            <img src="../starrysky/img/bg大.png" alt="" class="tuoGuanBannerImg">
            <div class="powerTitle" id="power" ref="power">
                <span>星空云算力</span>
                <div class="line_1"></div>
            </div>
            <div class="powerItemBox">
                <img src="../starrysky/img/mian.png" alt="" class="powerItemBoxImg_3">
                <img src="../starrysky/img/wen.png" alt="" class="powerItemBoxImg_4">
                <img src="../starrysky/img/di.png" alt="" class="powerItemBoxImg_5">
            </div>
        </div>
        <div class="menu_1">
            <img :src="menuImg" alt="" class="homeImg" @click="mao('Home',0)">
            <div class="menuItem" @click="mao('titleXinkong',5)">星空生态</div>
            <div class="menuItem" @click="mao('kuangji',1)">星空矿机</div>
            <div class="menuItem action" @click="mao('power',2)">云算力</div>
            <div class="menuItem" @click="mao('IPFS',3)">IPFS官方</div>
            <div class="menuItem" @click="mao('us',4)">联系我们</div>
        </div>
    </div>
    <div id="H4" class="IPFS" :class="{animated:IPFSisAction,fadeInUpBig:IPFSisAction}">
        <div class="IPFSContent">
            <div class="powerTitle" id="IPFS" ref="IPFS">
                <span>IPFS官方简介</span>
                <div class="line_1"></div>
            </div>
        </div>
        <div class="IPFSBox">
            <video id="media" class="video-js vjs-default-skin" controls vertica="true" width="700" height="400"
                   preload="none" data-setup="{}">
                <source src="http://xk-huadong1.oss-cn-hangzhou.aliyuncs.com/public/media/xk_001.mp4" type='video/mp4'>
                <source src="http://xk-huadong1.oss-cn-hangzhou.aliyuncs.com/public/media/xk_001.mp4" type="video/ogg">
            </video>
        </div>
        <img src="../starrysky/img/Group_16.png" alt="" class="IPFSImg_17">
        <img src="../starrysky/img/Group_17.png" alt="" class="IPFSImg_16">
        <div class="menu_1">
            <img :src="menuImg" alt="" class="homeImg" @click="mao('Home',0)">
            <div class="menuItem" @click="mao('titleXinkong',5)">星空生态</div>
            <div class="menuItem" @click="mao('kuangji',1)">星空矿机</div>
            <div class="menuItem" @click="mao('power',2)">云算力</div>
            <div class="menuItem action" @click="mao('IPFS',3)">IPFS官方</div>
            <div class="menuItem" @click="mao('us',4)">联系我们</div>
        </div>
    </div>
    <div id="H5" class="contraUs" :class="{animated:usisAction,fadeInUpBig:usisAction}">
        <div class="contraUsContent">
            <div class="contraUsItemTitle" id="us" ref="us">
                <span>联系我们</span>
                <div class="line_1"></div>
            </div>
            <div class="contraUsItemBox">
                <div class="qcode">
                    <img src="../starrysky/img/qcode.png" alt="">
                    <span>星空生态小程序</span>
                </div>
                <div class="shuline"></div>
                <div class="contraUsRight">
                    <div class="contraUsRightItem">
                        <img src="../starrysky/img/icon_电话.png" alt="">
                        <span>18501659579</span>
                    </div>
                    <div class="contraUsRightItem">
                        <img src="../starrysky/img/icon_邮箱.png" alt="">
                        <span>support@tianrukj.com</span>
                    </div>
                    <div class="contraUsRightItem">
                        <img src="../starrysky/img/icon_网址.png" alt="">
                        <span>http://sky.valuechain.group</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="menu_1">
            <img :src="menuImg" alt="" class="homeImg" @click="mao('Home',0)">
            <div class="menuItem" @click="mao('titleXinkong',5)">星空生态</div>
            <div class="menuItem" @click="mao('kuangji',1)">星空矿机</div>
            <div class="menuItem" @click="mao('power',2)">云算力</div>
            <div class="menuItem" @click="mao('IPFS',3)">IPFS官方</div>
            <div class="menuItem action" @click="mao('us',4)">联系我们</div>
        </div>
    </div>
</div>
<script type="text/javascript">
    let vm = new Vue({
        el: '#wrapp',
        data: {
            xingkongBoxList: [
                {
                    img: "./img/icon核心技术.png",
                    content: "多次迭代的自主研发挖矿系统，从网络架构、通信模块、软件算法、控制系统等多个维度提升挖矿效率",
                    title: "核心技术优势",
                    isShow: false
                },
                {
                    img: "./img/icon供应链.png",
                    content: "超过两家供应商为我方提供优质服务器，并与希捷定制开发专用矿机，打造具有领先优势的硬件设备",
                    title: "健全的供应链",
                    isShow: false
                },
                {
                    img: "./img/icon矿场安全.png",
                    content: "所有矿机均托管于标准IDC机房，稳定的网络和电力确保矿机高效挖矿",
                    title: "矿场安全可靠",
                    isShow: false
                },
                {
                    img: "./img/icon核心技术.png",
                    content: "核心团队均名校毕业，在硬件、软件、算法、运维、风控等领域拥有丰富经验",
                    title: "专业运营团队",
                    isShow: false
                },
            ],
            IsanimationImg_1: false,
            xiongKongisAction: false,
            kuangjiisAction: false,
            powerisAction: false,
            IPFSisAction: false,
            usisAction: false,
            menuImg: "./img/icon_主页.png",
            menuImgAction: "./img/greenHome.png",
            height:0
        },
        methods: {
            enter: function (index) {
                this.xingkongBoxList[index].isShow = true;
            },
            leave: function (index) {
                this.xingkongBoxList[index].isShow = false;
            },
            mao: function (searchUserName, type) {
                let section = document.getElementById(searchUserName);
                let idName = null;
                if (type === 1) {
                    console.log("nihao")
                    idName = this.$refs.kuangji.id;
                } else if (type === 2) {
                    idName = this.$refs.power.id;
                } else if (type === 3) {
                    idName = this.$refs.IPFS.id;
                } else if (type === 4) {
                    idName = this.$refs.us.id;
                } else if (type === 5) {
                    idName = this.$refs.titleXinkong.id;
                } else if (type === 0) {
                    idName = this.$refs.titleXinkong.id;
                }
                if (idName === 'titleXinkong') {
                    this.reset();
                    this.xiongKongisAction = true;
                } else if (idName === "kuangji") {
                    this.reset();
                    this.kuangjiisAction = true;
                } else if (idName === "power") {
                    this.reset();
                    this.powerisAction = true;
                } else if (idName === "IPFS") {
                    this.reset();
                    this.IPFSisAction = true;
                } else if (idName === "us") {
                    this.reset();
                    this.usisAction = true;
                } else if (idName === "Home") {
                    this.reset();
                    this.menuImgAction = "./img/greenHome.png";
                }
                if (section) {
                    section.scrollIntoView({
                        behavior: "smooth",
                        block: "start",
                    })
                }
            },
            reset: function () {
                this.xiongKongisAction = false;
                this.kuangjiisAction = false;
                this.powerisAction = false;
                this.IPFSisAction = false;
                this.usisAction = false;
            },
            getScrollHeight: function () {
                return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
            },
            getdivHeight:function (id) {
                return document.getElementById(id).clientHeight
            },
            handleScroll(){
                let height=this.getScrollHeight();
                let t = document.documentElement.scrollTop || document.body.scrollTop;
                console.log(t)
                if(t>50){
                    this.xiongKongisAction = true;
                }
                let percent=(t/height).toFixed(2);
                let p=parseFloat(percent);
                console.log(p)
                if(p>=0.15&&0.48>=p){
                    this.kuangjiisAction = true;
                }else if(p>=0.48&&0.59>=p){
                    this.powerisAction = true;
                }else if(0.59&&0.73>=p){
                    this.IPFSisAction = true;
                }else if(p>=0.73){
                    this.usisAction = true;
                }
            }
        },
        mounted() {
            let height=this.getScrollHeight();
            window.addEventListener('scroll', this.handleScroll);
        },
        watch: {
            height:function (value) {
                if(value===50){
                    // this.xiongKongisAction = true;
                    console.log(this.xiongKongisAction)
                }
            }
        }

    })
</script>
</body>

</html>